<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 视图  view -->
    <div id="app">
        <!--  双大括号会将数据解释为普通文本 -->
        <p v-cloak>{{message}}</p>
    </div>


</body>
<script>
    // 模板语法
    // 插值
    //    {{}} 文本插值(在标签对之间使用 -> 拼接)
    //     a. {{xxx}} 将会被替代为对应 数据对象(data) 上对应属性名的值
    //        (1) 如果data上对应属性名的值是null和undefined  =>  在模板中会被渲染为""
    //        (2) 如果data上对应属性名的值是数组和对象类型  =>  会先隐式转化为json字符串 再在模板中被渲染为
    //     b. 可以接收javascript表达式 -> {{xxx}} 将会被替代为表达式的结果(值))

    //     双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

    // 指令   => 是标签的特殊属性 (写在标签内)
    // 指令 (Directives) 是带有 v-前缀的特殊 attribute, 指令 attribute 的值预期是单个 JavaScript 表达式  (v-for 是例外情况，稍后我们再讨论)
    // 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 注意:
    // 1. 指令是带有v-前缀的特殊属性(attribute),不同的指令有不同的作用(vue中定义好的)
    // 2. 指令 attribute 的值预期是单个 JavaScript 表达式  => 使用的是表达式的最终结果
    // 3. 指令的最终目的是操作dom, 且当表达式的值改变时,视图也会更新

    // Vue在解析模板语法过程中 发现标签出现以v-开头的特殊属性,则会取出属性值,作为javascript表达式解析 => 得到表达式的结果  => 在按功能使用表达式的结果

    // v-html   设置标签内的html结构 (操作元素,改变元素的html结构 innerHTML)
    // v-text   设置标签内的文本 (操作元素,改变元素的文本 innerText)
    // v-pre    禁用文本插值 -> 此时{{xxxx}} 都会作为普通文本解析

    // v-cloak   这个指令保持在元素上直到关联实例结束编译 (等Vue实例完成初始化渲染之后 会移除此属性 -> 这个指令可以配合属性选择器 => 可以隐藏未编译的双大括号语法(Mustache 标签)直到实例准备完毕。 )


    // v-if  v-else  v-else-if
    // v-show
    // v-for

    // 指令的常见格式:
    // v-指令名    v-pre  v-clock
    // v-指令名="指令值"    v-html v-text v-show v-if
    // v-指令名:="指令值"    v-html v-text v-show v-if



    // Vue实例(应用)   => 控制层 View Model
    setTimeout(() => {
        var vm = new Vue({
            // el:"#app",  // 挂载的元素
            // 数据层 Model
            data: {   // 挂载的数据  => 可以在挂载的元素中对应属性名将属性值渲染到元素中
                message: "hello world",
            },
            methods: { // 挂载的方法 => 方法可以有多个
                addCount: function () {
                    console.log(this); //this -> 当前vue实例
                    this.count++;
                },
                say() {
                    return "hello";
                }
            }
        })
        console.log(vm);
        vm.$mount("#app");
    }, 5000)










</script>

</html>